<template>
  <div>
    <div class="demo-inner-divider">回车键搜索</div>
    <span class="demo-description">
      回车键会触发事件on-submit事件，回车键搜索样式下搜索图标在左侧，is-enter设置为true则启用该样式。
    </span>
    <div class="search-wrapper">
      <e-search
        class="enter-search-component"
        is-enter
        :clearable="true"
        placeholder="按名称搜索"
        style="width: 200px;"
        @on-submit="handleSubmit"
        @on-enter="handleEnter"
      ></e-search>
    </div>
    <div class="demo-inner-divider">按钮搜索</div>
    <span class="demo-description">
      点击右侧搜索图标触发on-submit事件。
    </span>
    <div class="search-wrapper">
      <e-search
        placeholder="按名称搜索"
        class="button-search-component"
        style="width: 200px;"
        @on-enter="handleEnter"
        @on-submit="handleSubmit" />
    </div>
    <div class="demo-inner-divider">筛选搜索</div>
    <span class="demo-description">
      带前置搜索条件的搜索框，传入filter-items对象启用筛选搜索功能，此功能必须是在按钮搜索前提下才有效。
    </span>
    <div class="search-wrapper">
      <e-search
        class="filter-search-component"
        style="width: 300px"
        placeholder="按名称搜索"
        @on-submit="handleSubmit"
        @on-select="handleSelect"
        @on-enter="handleEnter"
        :filter-value=filterValue
        :filter-items="cityList" />
    </div>
    <search-md class="markdown-body"></search-md>
  </div>
</template>

<script>
import searchMd from '../../docs/search.md';

export default {
  name: 'DemoSwitch',
  components: {
    searchMd
  },
  data() {
    return {
      trueValue: true,
      falseValue: false,
      loading: true,
      filterValue:'1',
      cityList:[
        {
          value: '1',
          label: '选项一'
        },
        {
          value: '2',
          label: '选项二',
          disabled: true
        },
        {
          value: '3',
          label: '不可选项'
        }
      ]
    };
  },
  methods: {
    handleSubmit (value, filter) {
      console.warn(`handleSubmit--- value:${value}, filter:${filter}`)
    },
    handleEnter(value,filter){
      console.warn(`handleEnter--- value:${value}, filter:${filter}`)
    },
    handleSelect (value) {
      console.warn(`handleSelect--- value:${value}`)
    },
  },
}
</script>

<style scoped>
.demo-description {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}
.search-wrapper {
  margin-top:10px;
  margin-bottom:20px;
}
.markdown-body {
  margin-top:20px;
}
</style>
